<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="formInline.user" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="formInline.region" placeholder="学院">
          <el-option label="" value=""></el-option>
          <el-option
            v-for="(item, index) in collegeName"
            :key="index"
            :label="item.college"
            :value="item.college"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onAdd">添加</el-button>
        <!-- <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :auto-upload="false"
          :on-change="handle"
        >
          <el-button slot="trigger" size="small" type="primary">
            选取文件
          </el-button>
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
          >
            上传到服务器
          </el-button>
        </el-upload> -->
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.student_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.student_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属学院" width="220">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.student_college }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            查看
          </el-button>
          <el-button size="mini" @click="handleUpdate(scope.row)">
            修改密码
          </el-button>
          <el-button size="mini" @click="handleDele(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看信息弹出框 -->
    <el-dialog title="信息" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input disabled v-model="form.student_name"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input disabled v-model="form.student_num"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input disabled v-model="form.student_class"></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-input disabled v-model="form.student_college"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input disabled v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input disabled v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改密码弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisibless" width="30%">
      <el-form ref="forms" :rules="rules" :model="forms" label-width="80px">
        <el-form-item label="密码">
          <el-input v-model="forms.old" disabled></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new">
          <el-input v-model="forms.new"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibless = false">取 消</el-button>
        <el-button type="primary" @click="trueUpdate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="dialogVisibles" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学生学号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="region">
          <el-select v-model="ruleForm.region" @change="fil" placeholder="学院">
            <el-option
              v-for="(item, index) in collegeName"
              :key="index"
              :label="item.college"
              :value="item.college"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="class">
          <el-select v-model="ruleForm.class" placeholder="专业">
            <el-option
              v-for="(item, index) in classed"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="true_add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryinfo.limit"
      :current-page="queryinfo.current"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
      :hide-on-single-page="age"
    >
    </el-pagination>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import xlsx from "xlsx";
import { readFiles } from "../../../assets/lib/utils";
export default {
  created() {
    this.get_studentAllInfo();
  },
  data() {
    return {
      total: null,
      queryinfo: {
        limit: 4,
        current: 1,
      },
      college_name: [],
      form: {},
      forms: {
        old: "",
        new: "",
      },
      age: true,
      dialogVisible: false,
      dialogVisibles: false,
      dialogVisibless: false,
      ruleForm: {},
      rules: {
        name: { required: true, message: "必填", trigger: "blur" },
        region: { required: true, message: "必填", trigger: "blur" },
        class: { required: true, message: "必填", trigger: "blur" },
        num: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 6, max: 12, message: "账号6-12位", trigger: "blur" },
        ],
        new: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 6, max: 12, message: "密码6-12位", trigger: "blur" },
        ],
      },
      formInline: {},
      tableData: [],
      tableData_msg: [],
      classed: [],
    };
  },

  computed: {
    ...mapState(["collegeName", "collegeFilter"]),
  },
  methods: {
    ...mapMutations(["filte"]),
    fil() {
      this.filte(this.ruleForm.region);
      this.classed = this.collegeFilter[0].collegeClass;
      // console.log(this.classed);
    },
    //   查询事件
    onSubmit() {
      this.queryinfo.current = 1;
      this.get_studentAllInfo();
    },

    // 查看信息详情
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogVisible = true;
      this.form = row;
    },
    //修改密码
    handleUpdate(row) {
      this.dialogVisibless = true;
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/get_stdpwd",
          this.$qs.stringify(row)
        )
        .then((res) => {
          // console.log(res);
          if (res.data.status == 0) {
            this.forms.old = res.data.data[0].password;
            // console.log(res.data.data[0].password);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    trueUpdate() {
      this.$refs.forms.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/minAdmin/update_stdpwd",
            this.$qs.stringify(this.forms)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.$message.success(res.data.message);
              this.dialogVisibless = false;
              this.forms.new = "";
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    //删除学生信息，是删除关于该学生所有表里的信息
    handleDele(row) {
      // console.log(row);
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/dele_studentinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.get_studentAllInfo();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    onAdd() {
      this.dialogVisibles = true;
    },
    true_add() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/bigAdmin/add_studentInfo",
            this.$qs.stringify(this.ruleForm)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.dialogVisible = false;
              this.get_studentAllInfo();
              this.$message.success(res.data.message);
              this.ruleForm = {};
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    // 获取所有学生的信息
    get_studentAllInfo() {
      const info = { ...this.formInline, ...this.queryinfo };
      this.$http
        .get("http://127.0.0.1:8080/bigAdmin/get_studentAllInfo", {
          params: info,
        })
        .then((res) => {
          // console.log(res);
          if (res.data.status == 0) {
            this.tableData = res.data.data.datalist;
            this.tableData_msg = res.data.data.results;
            this.total = res.data.data.total;
          } else {
            this.tableData = [];
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 点击页面跳转
    currentChange(val) {
      this.queryinfo.current = val;
      this.get_studentAllInfo();
    },
    // 上一页
    prevClick(val) {
      this.queryinfo.current = val;
      this.get_studentAllInfo();
    },
    // 下一页
    nextClick(val) {
      this.queryinfo.current = val;
      this.get_studentInfo();
    },
    // async handle(file) {
    //   // 读取文件
    //   let data = await readFiles(file.raw);
    //   let workbook = xlsx.read(data, { type: "binary" });
    //   let work = workbook.Sheets[workbook.SheetNames[0]];
    //   data = xlsx.utils.sheet_to_json(work);
    //   // console.log(data);

    //   var character = {
    //     student_name: {
    //       text: "姓名",
    //       type: "string",
    //     },
    //     student_num: {
    //       text: "学号",
    //       type: "string",
    //     },
    //     student_class: {
    //       text: "专业",
    //       type: "string",
    //     },
    //     college_name: {
    //       text: "所属学院",
    //       type: "string",
    //     },
    //   };

    //   //把读取处来的数据变为最后可以上传的数据
    //   data.forEach((val) => {
    //     let obj = {};
    //     for (let key in character) {
    //       if (!character.hasOwnProperty(key)) break;
    //       let v = character[key],
    //         text = v.text,
    //         type = v.type;
    //       v = val[text] || "";
    //       type == "string" ? (v = String(v)) : null;
    //       type == "number" ? (v = Number(v)) : null;
    //       obj[key] = v;
    //     }
    //     this.fileinfo.push(obj);
    //   });
    // },
    // submitUpload() {
    //   // console.log(this.fileinfo);
    //   this.$http
    //     .post(
    //       "http://127.0.0.1:8080/bigAdmin/insert_file",
    //       this.$qs.stringify(this.fileinfo)
    //     )
    //     .then((res) => {
    //       console.log(res);
    //     });
    //   // console.log(...this.fileinfo);
    // },
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
